<script setup>
import { nextTick, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { Message } from "@arco-design/web-vue";
import userApi from "@/api/userApi";
import roleApi from "@/api/roleApi";
import orgApi from "@/api/orgApi";
import SearchTable from "@/components/SearchTable.vue";

const router = useRouter();

const searchListTable = ref();

const submitForm = ref();
const searchForm = ref();
const searchModel = reactive({
  createUserId: "",
});
const visible = ref(false);
const loading = ref(false);

let submitData = ref({});
const roleList = ref([]);
const schoolList = ref([]);

let pagination = reactive({
  total: 0,
  current: 1,
  pageSize: 15,
  showPageSize: true,
  pageSizeOptions: [15, 25, 30, 50],
  showTotal: true,
  pageChange: (current) => {
    pagination.current = current;
    search();
  },
  pageSizeChange(size) {
    pagination.pageSize = size;
    search();
  },
});

const columns = [
  {
    title: "账号",
    dataIndex: "username",
    width: 120,
  },
  {
    title: "姓名",
    dataIndex: "realname",
    width: 120,
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
    width: 150,
  },
  {
    title: "操作",
    slotName: "action",
    fixed: "right",
    width: 80,
  },
];

const checkedAll = ref(false);

const showAddDialog = () => {
  visible.value = true;
  submitForm.value.resetFields();
  checkedAll.value = false;
  submitData.value = {}
};

const editRecord = (record) => {
  visible.value = true;
  nextTick(() => {
    submitForm.value.resetFields();
    submitData.value = Object.assign({}, record);
  });
};

const deleteRecord = (record) => {
  userApi
    .delete({
      id: record.id,
    })
    .then((res) => {
      search();
    });
};

const handleSubmitSuccess = (values, e) => {
  userApi.save(values).then((res) => {
    visible.value = false;
    Message.success("保存成功");
    search();
  });
};

const search = () => {
  searchListTable.value.load();
};

const orgTreeData = ref([]);
const getOrgTree = () => {
  orgApi.getTree().then((res) => {
    orgTreeData.value = res;
  });
};

const selectOrgNode = (keys) => {
  searchModel.orgId = keys[0];
  nextTick(() => {
    search();
  })
}

const queryRoleList = () => {
  roleApi.queryList().then(res => {
    roleList.value = res;
  })
}

const reset = () => {
  searchForm.value.resetFields();
};

queryRoleList();
getOrgTree();
</script>

<template>
  <div class="main-con">
    <a-card style="margin-bottom: 16px;">
      <a-row>
        <a-col :flex="1">
          <a-form ref="searchForm" :model="searchModel" :label-col-props="{ span: 8 }" :wrapper-col-props="{ span: 16 }"
            label-align="left">
            <a-row :gutter="16">
              <a-col :span="8">
                <a-form-item field="name" label="用户名">
                  <a-input v-model="searchModel.name" placeholder="请输入用户名" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item field="roleId" label="所属角色">
                  <a-select v-model="searchModel.roleId" placeholder="请选择所属角色" allow-clear="">
                    <a-option v-for="item in roleList" :key="item.id" :value="item.id" :label="item.name"></a-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </a-col>
        <a-divider style="height: 84px" direction="vertical" />
        <a-col :flex="'86px'" style="text-align: right">
          <a-space direction="vertical" :size="18">
            <a-button type="primary" @click="search">
              <template #icon>
                <icon-search />
              </template>
              查询
            </a-button>
            <a-button @click="reset">
              <template #icon>
                <icon-refresh />
              </template>
              重置
            </a-button>
          </a-space>
        </a-col>
      </a-row>
    </a-card>
    <a-row :gutter="16">
      <a-col :span="5">
        <a-card>
          <div style="height: 700px;">
            <a-tree :expanded-keys="['1']" :data="orgTreeData" @select="selectOrgNode"
              :fieldNames="{ key: 'id', title: 'name' }"></a-tree>
          </div>
        </a-card>
      </a-col>
      <a-col :span="19">
        <search-table ref="searchListTable" :columns="columns" url="/admin/v1/user/page" :params="searchModel"
          style="margin-top: 20px">
          <template #toolbar>
            <a-space>
              <a-button type="primary" @click="showAddDialog">
                <template #icon>
                  <icon-plus />
                </template>
                新增账户
              </a-button>
            </a-space>
          </template>
          <template #school="{ record }">
            <a-row :gutter="10">
              <a-col :span="4" v-for="s in record.schoolList" :key="s.id" style="margin-bottom: 5px;">
                <a-tag>{{ s.name }}</a-tag>
              </a-col>
            </a-row>
          </template>
          <template #action="{ record }">
            <a-space>
              <a-button type="text" @click="editRecord(record)">编辑</a-button>
              <a-popconfirm content="确认要删除该数据吗？" @ok="deleteRecord(record)">
                <a-button type="text">删除</a-button>
              </a-popconfirm>
            </a-space>
          </template>
        </search-table>
      </a-col>
    </a-row>
  </div>
  <a-modal v-model:visible="visible" title="新增账户" :footer="null">
    <a-form ref="submitForm" size="large" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }"
      :model="submitData" @submit-success="handleSubmitSuccess">
      <a-form-item field="orgId" label="所属组织" :rules="[{ required: true, message: '请选择所属组织' }]">
        <a-tree-select v-model="submitData.orgId" :data="orgTreeData" :fieldNames="{ key: 'id', title: 'name' }"
          placeholder="请选择所属组织"></a-tree-select>
      </a-form-item>
      <a-form-item field="roleId" label="角色类型" :rules="[{ required: true, message: '请选择角色类型' }]">
        <a-select v-model="submitData.roleId" placeholder="请选择所属角色" allow-clear="">
          <a-option v-for="item in roleList" :key="item.id" :value="item.id" :label="item.name"></a-option>
        </a-select>
      </a-form-item>
      <a-form-item field="username" label="账号名" :rules="[{ required: true, message: '请输入账号名' }]">
        <a-input v-model.trim="submitData.username" placeholder="请输入账号名" />
      </a-form-item>
      <a-form-item field="realname" label="姓名" :rules="[{ required: true, message: '请输入姓名' }]">
        <a-input v-model.trim="submitData.realname" placeholder="请输入姓名" />
      </a-form-item>
      <a-form-item>
        <div style="color: #999; font-size: 12px">
          注：账号新增成功后，默认登录密码为888888
        </div>
      </a-form-item>
      <a-form-item>
        <a-space>
          <a-button html-type="submit" type="primary">保存</a-button>
          <a-button @click="() => {
            visible = false;
          }
            ">取消</a-button>
        </a-space>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<style scoped></style>
